<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>父与子</title>
        <link rel="stylesheet" href="./vue3-components.css">
    </head>
    <body>


        <div id="root"></div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script>
            const TopicTitle = {
                props: [ 'title' , 'author' ],
                template: `<div class="topic-title">
                              <h4>{{ title }}</h4>
                              <p>{{ author }}</p>
                           </div>`
            }

            const TopicContent = {
                props: ['content'],
                template: `<div class="topic-content">{{ content }}</div>`
            }

            const TopicComment = {
                props: [ 'topicId' ],
                template: `<div class="topic-comment">
                               <textarea v-model="comment" ref="commentContent"></textarea>
                               <button @click="handler" ref="commentButton">评论</button>
                           </div>`,
                data(){
                    return {
                        comment: ''
                    }
                },
                methods: {
                    handler(){
                        console.log( this.topicId , this.comment );
                        console.log( 'parent: ' , this.$parent );
                        console.log( 'root: ' , this.$root );
                        console.log( 'refs: ' , this.$refs );
                    }
                }
            }

            const CommentList = {
                props: [ 'comments' ],
                template: `<div class="comment-list">
                              <div class="comment-item" v-for="(comment,index) in comments" :key="comment.id">
                                {{ index + 1 }} | {{ comment.content }}
                              </div>
                           </div>`,
            }

            const TopicItem = {
                name: 'TopicItem',
                props: [ 'topic' ],
                template: `<div class="topic-item">
                              <topic-title :title="topic.title" 
                                           :author="topic.author" 
                                           ref="topicTitle">
                              </topic-title>
                              <topic-content :content="topic.content" ref="topicContent"></topic-content>
                              <topic-comment :topic-id="topic.id" ref="topicComment"></topic-comment>
                              <comment-list :comments="topic.comments" ref="commentList"></comment-list>
                              <p class="topic-buttons">
                                <button @click="children">子组件引用</button>
                                <button @click="getParent">父组件</button>
                                <button @click="getRoot">根组件</button>
                              </p>
                           </div>`,
                components: {
                    'topic-title': TopicTitle,
                    'topic-content': TopicContent,
                    'topic-comment': TopicComment,
                    'comment-list': CommentList,
                },
                methods: {
                    children(){
                        // 获得当前组件中所有的使用过 ref attribute 的组件
                        console.log( this.$refs );
                        // 通过 $refs 可以直接根据 ref 取值获得指定的组件
                        console.log( this.$refs.topicComment );
                    },
                    getParent(){
                        console.log( this.$parent );
                    }
                    ,
                    getRoot(){
                        console.log( this.$root );
                    }
                }
            }

            // 根组件选项
            const options = {
                template: `<div class="topic-list">
                                <topic-item v-for="topic in topics" :topic="topic" :key="topic.id"></topic-item>
                           </div>`,
                data(){
                    return {
                        topics: [
                            {
                                id: 1234 ,
                                title: '昨天几例？',
                                content: '昨天有几例确诊？几例无症状？' ,
                                author: '张三丰',
                                comments: [
                                    { id: 123411 , content: '好像没有确诊，只是有两例无症状' },
                                    { id: 123402 , content: '那什么时候学校才能解封呢？' }
                                ]
                            },
                            {
                                id: 5678 ,
                                title: '明天会下雨吗？',
                                content: '看了天气预报说明天不下雨，我是该相信呢还是不该相信呢？' ,
                                author: '郭襄',
                                comments: [
                                    { id: 123411 , content: '好像没有确诊，只是有两例无症状' },
                                    { id: 123402 , content: '那什么时候学校才能解封呢？' }
                                ]
                            }
                        ]
                    }
                },
                components: {
                    'topic-item':  TopicItem
                }
            }

            Vue.createApp(options).mount('#root');
        </script>

        
    </body>
</html>